<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>项目管理</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../ep/static/js/vue.js"></script>
    <!--  引入element组件库 -->
    <script src="../ep/static/js/element.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="../ep/static/elementui/theme-chalk/index.css">
    <script src="../ep/static/js/axios.js"></script>

</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">项目管理</div></el-col>
    </el-row><br>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"><el-row>

            <el-button type="primary" @click="dialogFormVisible = true">新建项目</el-button>

        </el-row></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row><br>
    <el-row>
        <!-- 名字搜索框  -->
        <el-col :span="8"><el-select v-model="project" placeholder="请选择">
            <el-option
                    v-for="item in projectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        </el-col>
        <!-- 时间搜索框 -->
        <el-col :span="8"><div class="grid-content bg-purple-light"><el-date-picker
                v-model="value"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00">
        </el-date-picker></div></el-col>

        <!-- 按钮 -->
        <el-col :span="8"><div class="grid-content bg-purple">
            <el-row>
                <el-button type="primary" round @click="find()">查询</el-button>
                <el-button type="primary" round @click="black()">重置</el-button>
            </el-row>
        </div>
        </el-col>
    </el-row><br>

    <el-row>
        <!-- 表格 -->
        <el-col :span="24"><div class="grid-content bg-purple-dark">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="projectBean.projName"
                        label="项目"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="subjectName"
                        label="学科"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column

                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="size"
                    layout="total,  prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        </el-col>

    </el-row>

    <el-dialog title="新建项目" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="科目名称" prop="name2">
                <el-input v-model="ruleForm.name2"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script type="text/javascript">





   let element= new Vue({
        el: "#app",
        data:{
            projectOptions:[],
            project:"",
            value:"",
            total:"",
            size:10,
            currentPage:1,
            tableData: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            ruleForm: {
                name: '',
                name2: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur'
                },
                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }
                ],
                name2: [{
                    required: true,
                    message: '请输入学科名称',
                    trigger: 'blur'
                },
                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }
                ],


            }

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('添加成功!');
                        axios.get('project/more', {
                            params: {
                                projName:element.$data.ruleForm.name,
                                subjectName:element.$data.ruleForm.name2
                            }
                        })
                            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                                // console.log(res.data.data.data);
                                // this.total = res.data.data.total;
                                // this.tableData = res.data.data.data;
                                location.reload()
                            })
                            .catch(error => {
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            find:function () {
                console.log(this.project)
                console.log(element.$data.value)
                axios.get('subject/findOneByCondition',{
                    params: {
                        id:this.project,
                        createTime:element.$data.value
                    }
                })
                    .then(function (res) {
                        element.$data.total=res.data.length
                        element.$data.tableData=res.data;
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            del(row, index) { //删除
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: 'project/del?id=' + row.id,
                    }).then(res => {
                        alert("删除成功");
                        location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            black: function () {
                element.$data.project=""
                element.$data.value=""
            }



        }

    })
   axios.get('subject/findAll')
       .then(function (res) {
    element.$data.total=res.data.length
           element.$data.tableData=res.data;

       })
       .catch(function (error) {
           console.log(error)
       });
    axios.get("project/getProject")
        .then(function (res) {
            let projs = res.data
            for(let i=0; i<projs.length; i++){
                let proj = {
                    value:i+1,
                    label:projs[i]
                }
                element.$data.projectOptions.push(proj)
            }
        })
</script>
</html>
